<template>
    <div class="layuipage">
      <div>
        <select-down ></select-down>
        <button class="du-btn" type="buton">提交</button>
      </div>
      <!--<router-link to="/carousel">轮播图</router-link>-->
      <!--<carousel ></carousel>-->
      <duDate :selDate="date" @changeDate="setDate">日期控件</duDate>
      <carousel >
        <div class="carousel-item"><div class="carousel-img" >zxZxz</div></div>
        <div class="carousel-item"><img class="carousel-img" src="../../static/carouse2.png"/></div>
        <div class="carousel-item"><img class="carousel-img" src="../../static/carouse3.png"/></div>
        <div class="carousel-item"><img class="carousel-img" src="../../static/carouse2.png"/></div>
      </carousel>
    </div>
</template>

<script scoped>
  import selectlist from '../../static/select.json'
  import duDate from '../components/duDate.vue'
  import carousel from '../components/carousel.vue'
  import selectDown from '../components/selectDown.vue'
  export default {
    data(){
      return{
//        city:{"key":"","value":""},
//        selectShow:false,
//        selectlist:"",
//        isActive:false,
        date:"2018-03-14"
      }
    },
    components:{
      duDate,
      selectDown,
      carousel
    },
//    created(){
//      this.selectlist = selectlist;
//      console.log(this.selectlist);
//// 在组件 B 创建的钩子中监听事件
//
//    },
//    computed: {
//    },
//    mounted:function(){
//
//        var self=this
////      ----------点击非下拉框下拉框收起Start-----------
////        document.onclick=function (event) {
////          debugger
////          var area=document.getElementById('selectArea');
////          var areadd=area.getElementsByTagName("dd");
////          for(var j=0;j<areadd.length;j++){
////            if(areadd[j]==event.target){
////              return ;
////            }
////          }
////          if(document.getElementById("selectCity")==event.target ||document.getElementById("selecUpicon")==event.target){
////            return ;
////          }
////          {
////            self.selectShow = !self.selectShow;
////            console.log(self.selectShow )
////          }
////        }
//      //      ----------点击非下拉框下拉框收起End-----------
//
//    },
    methods:{
//      submitCity(){
//        if(this.city.key==null||this.city.key=="") {
//          alert("请选择一个城市！")
//        }
//
//      },
//
//      setSelectData(event){
//  //        this.selectShow=false;   //下拉框使用失焦方法时去掉
//        this.city.key=event.currentTarget.getAttribute("value");
//        this.city.value=event.currentTarget.innerText;
//        console.log(JSON.stringify(this.city))
//      },
//      selectBlur(){
//        console.log("下拉框失去焦点")
//        this.selectShow=false;
//      },
//      isScrollSelect() {
//        var self=this
//        this.selectShow=true;
//        var dl=document.getElementsByTagName("dl");
//        setTimeout(function () {
//          console.log("执行滚动"+dl[0].offsetHeight)
//          if(dl[0].offsetHeight >100){
//            self.isActive=true;
//          }
//        },2)
//
//
//      },
      setDate(va){
        console.log("日期666"+va)
        this.date=va
      }
    },
//    computed:{
//      selectSearchFilter: function () {
//           var newSelectData = ''
//           debugger
//           if (!this.city) {
//             return
//           }
//           var selectdata=this.selectlist.city[0]
//           for (var key in selectdata) {
//             if (selectdata[key].indexOf(this.inputData) > 0) {
//               newSelectData.push(selectdata[key])
//             }
//           }
//           return selectdata
//         }
//    }
  };


</script>

<style scoped>

  /*@import "../../node_modules/layui-src/src/css/layui.css";*/
  @import "../../src/assets/css/du-public.css";
  .layuipage{

}
.form-btn{
  margin-top:10px;
}
  .list-item {
    display: inline-block;
    margin-right: 10px;
  }
  .list-enter-active, .list-leave-active {
    transition: all 0.5s;
  }
  .list-enter, .list-leave-to{
    opacity: 0;
    transform: translateY(-10px);
  }

  .carousel-img{
    /*max-height: 100%;*/
    max-width: 100%;
    /*width: 100%;*/
    height: 100%;
  }

</style>
